<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react组件实例的三大属性之State</title>
</head>
<body>
  <!-- 创建一个容器 -->
  <div id="test"></div>

  <!-- 导入react库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    // 创建一个类组件
    class Weather extends React.Component {
      constructor (props) {
        // 继承类方法
        super(props)
        // 初始化状态
        this.state = { isHot:true }
        // 挂载chaneWeather函数
        this.changeWeather = this.changeWeather.bind(this)
      }
      render() {
        // 读取状态
        const {isHot} = this.state
        return (
          /* 其中的 this.changeWeather 为构造器中的this.changeWeather */
          <div>
            <h2 onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}</h2>
          </div>
        )
      }

      changeWeather(){
        // 获取原来的 isHot 状态
        const isHot = this.state.isHot

        // ### 注意：状态只能通过 setState 进行更新
        this.setState({ isHot:!isHot })

        // ### 注意：状态（state）不能被直接更改, 下面这行代码就是直接更改！！！
        // this.state.isHot = !isHot  // 这是错误的写法
        console.log(isHot)
      }
    }

    // 渲染组件到页面
    ReactDOM.render(<Weather/>, document.getElementById('test'))

    
  </script>
</body>
</html>